<template>
    <div class="pay-container">
        <!-- 生成微信支付二维码 -->
        <div class="erwei">
            <img :src="payUrl" alt="">
        </div>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-wechat_pay"></use>
        </svg>
        <span>使用微信进行支付</span>

        <el-descriptions title="订单详情">
            <el-descriptions-item label="订单号"></el-descriptions-item>
			<el-descriptions-item label="创建时间"></el-descriptions-item>
			<el-descriptions-item label="产品名称"></el-descriptions-item>
			<el-descriptions-item label="商品描述"></el-descriptions-item>
			<el-descriptions-item label="购买数量"></el-descriptions-item>
			<el-descriptions-item label="购买用户"></el-descriptions-item>
			<el-descriptions-item label="手机号"></el-descriptions-item>
			<el-descriptions-item label="总价格">
			</el-descriptions-item>
        </el-descriptions>
    </div>

</template>

<script>
//首先要获取订单id
import { mapState } from "vuex";
//引入生成二维码插件
import qrCode from "qrcode";
//引入获取订单和支付的方法
import * as api from "@/api/transaction"

export default{
    data () {
        return {
           	order_id: "",//订单号
			//请求的订单详情
			orderDetail: {
				//数据初始化
				orderDetail: [
      					{
						productName: "",
						description: "",
						quantity: "",
					},
				],
			},
			payUrlRes: {}, //请求获取的支付结果
			payUrl: "", //支付地址
        }
    },
    computed:{

    },
    created () {
        let {order_id} = this.$route.query
        this.order_id = order_id
        //3.如果用户刷新了当前页面,本次交易取消,我们需要让用户重新提交交易
        if (!this.order_id) {
            //没有订单id 有可能用户刷新了页面
            //提示:本次交易取消，返回到预支付页面
            this.$alert('本次交易取消，请重新提交','提示',[{
                confirmButtonText:'确定',
                callback:(action)=> {
                    this.$router.push({path:"/preorder"})
                }
            }])
            
            return
        }
        //1.根据订单id 请求订单详情
		//2.根据订单id 获取微信支付地址,=>我们获取地址之后,生成二维码

		//并发请求 一次发送多个请求 Promise.all([promise1,promise2])

        Promise.all([api.getOrderDetail(this.order_id), api.pay(this.order_id)])
        .then(res => {
            console.log(res);
            this.orderDetail = res[0].data.data
            let paymentRes = this.payUrl = res[1].data
            if (paymentRes.status) {
                //获取支付地址
                let payUrl = paymentRes.code_url

                //生成二维码
                qrCode.toDataURL(payUrl,(err,img)=>{
                    console.log(img);
                    this.payUrl = img
                })
            }
        })

        //轮询 查询支付状态
		//轮询的时候,一定要设置时间
		//设置200ms

        this.queryPayStatusInterval = setInterval(()=>{
            api.queryPayStatus(this.order_id)
            .then(res => {
                console.log(res);
                if (res.data.state) {
                    //跳转到支付成功这个页面
                    this.$router.push({path:"/payment/paysuccess"})
                }
                // else{
                //     this.$router.push({ path: "/payment/paysuccess" })
                // }
            })
        },2000)
    },
    beforeDestroy(){
       //组件即将销毁的时候
	   //清除定时器
       clearInterval(this.queryPayStatusInterval)
    }
}

</script>